<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品信息</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/home/index.css">
    <link rel="stylesheet" href="./css/info/index.css">
    <script src="./js/vue.js"></script>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div id="app">
        <!-- 广告 -->
        <div class="header_img">
            <img src="./img/goods/header.png" alt="">
        </div>
        <!-- 导航1 -->
        <div class="header_nav">
            <div class="nav_box">
                <ul class="left_list">
                    <li><a href="#">华硕官网</a></li>
                    <li><a href="./index">商城首页</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">驱动下载</a></li>
                    <li><a href="#">装机必备</a></li>
                    <li><a href="#">已旧换新</a></li>
                </ul>
                <ul class="right_list">
                    <li v-if="!login"><a href="/login">登录</a></li>
                    <li v-if="!login"><a href="/reg">注册</a></li>
                    <li v-if="login"><a href="#">{{user.username}}</a></li>
                    <li v-if="login"><a href="#" @click.prevent="exit()">退出</a></li>
                    <li><a href="#">消息</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#" style="border-right: none;">手机版</a></li>
                    <li class="cart">
                        <div class="title"><a href="./cart">购物车({{cart_num}})</a></div>
                        <div class="cart_list">
                            <p v-show="!login">您还没有登录！登录后进入购物车</p>
                            <p v-show="login">开发中,点击查看购物车</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 导航2 -->
        <div class="header_nav2">
            <div class="content">
                <div class="logo">
                    <img src="./img/goods/logo.png" alt="">
                    <img src="./img/goods/logo2.png" alt="">
                </div>

                <ul class="inlink">
                    <li><img src="./img/goods/UI/mini1.png" alt=""><span>华硕电脑官网</span></li>
                    <li><img src="./img/goods/UI/mini2.png" alt=""><span>ROG专区</span></li>
                    <li><img src="./img/goods/UI/mini3.png" alt=""><span>多彩a豆</span></li>
                    <li><img src="./img/goods/UI/mini4.png" alt=""><span>华硕好屏</span></li>
                </ul>

                <div class="search">
                    <input type="text" name="search" id="" v-model="search" placeholder="新人礼">
                    <span></span>
                </div>
            </div>
        </div>
        <!-- 商品信息 -->
        <div class="content" style="width: 100%;">
            <div class="page">
                <span>当前位置&nbsp;:&nbsp;</span>
                <div>
                    <a href="#">首页&nbsp;></a>
                    <a href="#">笔记本电脑&nbsp;></a>
                    <a href="#">游戏笔记本&nbsp;></a>
                    <a href="#">{{wares.type}}</a>
                </div>
            </div>
            <div class="content_main_warp">
                <div class="contenet_mian_body">
                    <div class="left_body" id="glass">
                        <div class="img_box">
                            <div class="mid_box">
                                <img :src="imgMid" alt="">
                                <div class="kuai" style="display: none;"></div>
                            </div>
                            <div class="box2">
                                <img src=".\img\goods\UI\left-arrow-small.png" alt="" class="btn1"
                                    @click="mini_btn_prev()">
                                <img src=".\img\goods\UI\right-arrow-small.png" alt="" class="btn2"
                                    @click="mini_btn_next()">
                                <div class="mini_box_warp">
                                    <ul class="mini_box">
                                        <li v-for="item in imgList">
                                            <img :src="item" alt="" @click="imgMid=item">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="big_box" style="z-index: 10;">
                            <img :src="imgMid" alt="" class="big_tu">
                        </div>
                    </div>
                    <div class="rigth_box">
                        <div class="title">{{wares.gname}}</div>
                        <div class="subtitle">
                            <span>140W满功耗RTX3060，双显三模，144Hz高色域电竞屏，享一年意外险！咨询客服有惊喜！</span>
                            <a href="#">购天选笔记本享一年意外险+双肩包鼠啦！</a>
                        </div>
                        <div class="mian_att">
                            <!-- 限时抢购 -->
                            <div class="att1">
                                <div class="gou">
                                    <img src=".\img\goods\UI\time@1x.png" alt="">
                                    <span>限时抢购</span>
                                </div>
                                <div class="price_box">
                                    <div class="label">限时抢购</div>
                                    <div class="price">￥<span>{{wares.gprice}}</span></div>
                                    <div class="original_price">￥{{wares.gprice+300}}</div>
                                    <div class="guize"><img src=".\img\goods\UI\msg.png" alt="">活动规则</div>
                                </div>
                            </div>
                            <!-- 优惠信息 -->
                            <div class="att2">
                                <div class="label">优惠信息</div>
                                <ul>
                                    <li>
                                        <span class="x">包邮</span>
                                        <span>订单总金额满10元包邮</span>
                                    </li>
                                    <li>
                                        <span class="x">赠品</span>
                                        <span>天选双肩背包&nbsp;x1</span>
                                    </li>
                                </ul>
                            </div>
                            <!-- 优惠券 -->
                            <div class="att3">
                                <div class="label">优惠券</div>
                                <div class="item">
                                    <div class="quan">满99减5</div>
                                    <div class="quan">满999减11</div>
                                </div>

                            </div>
                            <div class="hr"></div>
                            <!-- 官网权益 -->
                            <div class="att4">
                                <div class="label">官网权益</div>
                                <div class="item">
                                    <span>· 享笔记本意外险*</span>
                                    <span>· 享分期免息优惠*</span>
                                    <span>· 价保7天*</span>
                                </div>
                            </div>
                        </div>
                        <!-- 加购 -->
                        <div class="more_att">
                            <!-- 服务保障 -->
                            <div class="item">
                                <div class="label">延长保修</div>
                                <div class="item_cont">
                                    <div class="card">3年省心包
                                        <span>￥369.00</span>
                                        <img src=".\img\goods\UI\exclamation1x.png" alt="">
                                    </div>
                                    <div class="card">开学护航4年保
                                        <span>￥399.00</span>
                                        <img src=".\img\goods\UI\exclamation1x.png" alt="">
                                    </div>
                                    <div class="card">3年全面保
                                        <span>￥369.00</span>
                                        <img src=".\img\goods\UI\exclamation1x.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- 服务升级 -->
                            <div class="item">
                                <div class="label">服务升级</div>
                                <div class="item_cont">
                                    <div class="card">新机开荒
                                        <span>￥38.00</span>
                                        <img src=".\img\goods\UI\exclamation1x.png" alt="">
                                    </div>
                                    <div class="card">2年上门检修
                                        <span>￥99.00</span>
                                        <img src=".\img\goods\UI\exclamation1x.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- 按钮 -->
                            <div class="item">
                                <div class="label">购买数量</div>
                                <div class="item_cont">
                                    <div class="y counter">
                                        <img src=".\img\goods\UI\reduce.png" alt="" @click="cout_jian()">
                                        <span>{{counter}}</span>
                                        <img src=".\img\goods\UI\add.png" alt="" @click="cout_jia()">
                                    </div>
                                    <div class="y">
                                        <button @click="joinCart()">加入购物车</button>
                                        <button class="goumai">立即购买</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <!-- 推荐商品 -->
        <div class="recom" id="recom">
            <div class="recom_title"> 看了又看</div>
            <div class="recom_list">
                <div class="left_btn" @click="left_move()">
                    <img src=".\img\goods\UI\arrows.png" alt="">
                </div>
                <div class="right_btn" @click="right_move()">
                    <img src=".\img\goods\UI\arrows1.png" alt="">
                </div>
                <div class="swiperlist">
                    <ul>
                        <li v-for="(item,index) in recom" :key="index">
                            <img :src="item.gurl" alt="">
                            <div class="name">{{item.gname}}</div>
                            <div class="sub">{{item.tag}}</div>
                            <div class="price">￥{{item.gprice}}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 回到头部 -->
        <div class="gg" id="gg">
            <ul class="rightBox">
                <li class="icon1">
                    <div></div>
                    <p>个人中心</p>
                </li>
                <li class="icon2">
                    <div></div>
                    <p>热线</p>
                </li>
                <li class="icon3">
                    <div></div>
                    <p>优惠券</p>
                </li>
                <li class="icon4">
                    <div></div>
                    <p>客服</p>
                </li>
                <li class="icon5">
                    <div></div>
                    <p>APP</p>
                </li>
                <li class="icon6">
                    <div></div>
                    <p>注册好礼</p>
                </li>
                <li class="icon7" @click="toGo(0)">
                    <div></div>
                    <p>返回顶部</p>
                </li>
            </ul>
        </div>

        <!-- tab栏 -->
        <ul class="tab_list" id="tab">
            <li @click="tab_index=0" class="cli">商品详情</li>
            <li @click="tab_index=1">规格参数</li>
            <li @click="tab_index=2">商品评论</li>
            <li @click="tab_index=3">服务支持</li>
        </ul>
        <div class="tab_content">
            <div class="tab1" v-show="tab_index==0">
                <div class="tab1_warp">
                    <div class="card">
                        <img :src="wares.gurl" alt="">
                        <div class="detial">
                            <div class="item" v-for="item in wares.att">{{item}}</div>
                        </div>
                    </div>
                    <p>
                        <img v-for="item in tu1" :src="item" alt="">
                    </p>
                    <p class="infos">
                        <img v-for="item in 9" :src="item|tuStr" alt="">
                    </p>
                </div>
            </div>
            <div class="tab2" v-show="tab_index==1">
                <table>
                    <tbody>
                        <tr>
                            <th colspan="2">主要参数</th>
                        </tr>
                        <tr>
                            <td class="td_th">CPU型号</td>
                            <td> R7-6800H </td>
                        </tr>
                        <tr>
                            <td class="td_th">显卡型号</td>
                            <td>GeForce RTX 3060 </td>
                        </tr>
                        <tr>
                            <td class="td_th">内存容量</td>
                            <td> 2*8GB </td>
                        </tr>
                        <tr>
                            <td class="td_th">硬盘容量</td>
                            <td> 512GB M.2 NVMe </td>
                        </tr>
                        <tr>
                            <td class="td_th">屏幕色域</td>
                            <td> 100% sRGB </td>
                        </tr>
                        <tr>
                            <td class="td_th">分辨率</td>
                            <td> 全高清（1920 x 1080） </td>
                        </tr>
                        <tr>
                            <td class="td_th">刷新率</td>
                            <td> 144Hz </td>
                        </tr>
                        <tr>
                            <td class="td_th">散热规格</td>
                            <td>双风扇五散热导管 </td>
                        </tr>
                        <tr>
                            <td class="td_th">显卡功耗</td>
                            <td>140W </td>
                        </tr>
                        <tr>
                            <th colspan="2">处理器信息</th>
                        </tr>
                        <tr>
                            <td class="td_th">CPU规格</td>
                            <td> AMD Ryzen™ 7 6800H </td>
                        </tr>
                        <tr>
                            <td class="td_th">主频</td>
                            <td>3.2 GHz (up to 4.7 GHz) </td>
                        </tr>
                        <tr>
                            <td class="td_th">缓存</td>
                            <td>16M高速缓存 </td>
                        </tr>
                        <tr>
                            <td class="td_th">线程</td>
                            <td> 8核16线程 </td>
                        </tr>
                        <tr>
                            <th colspan="2">显卡信息</th>
                        </tr>
                        <tr>
                            <td class="td_th">显卡型号</td>
                            <td>独显+核显 </td>
                        </tr>
                        <tr>
                            <td class="td_th">显存容量</td>
                            <td> 6GB GDDR6 </td>
                        </tr>
                        <tr>
                            <th colspan="2">内存信息</th>
                        </tr>
                        <tr>
                            <td class="td_th">内存容量</td>
                            <td>2*8G（插槽） </td>
                        </tr>
                        <tr>
                            <td class="td_th">内存类型</td>
                            <td>DDR5 4800MHz </td>
                        </tr>
                        <tr>
                            <td class="td_th">内存插槽</td>
                            <td>2x SO-DIMM插槽 </td>
                        </tr>
                        <tr>
                            <td class="td_th">最大支持容量</td>
                            <td>2 x SODIMM 插槽 ，最大支持64GB </td>
                        </tr>
                        <tr>
                            <th colspan="2">硬盘信息</th>
                        </tr>
                        <tr>
                            <td class="td_th">硬盘容量</td>
                            <td>512GB M.2 NVMe™ PCIe® 4.0 SSD </td>
                        </tr>
                        <tr>
                            <th colspan="2">屏幕信息</th>
                        </tr>
                        <tr>
                            <td class="td_th">屏幕尺寸</td>
                            <td>15.6英寸 </td>
                        </tr>
                        <tr>
                            <td class="td_th">屏幕类型</td>
                            <td>LED 背光非触摸屏 </td>
                        </tr>
                        <tr>
                            <td class="td_th">屏幕色域</td>
                            <td>100% sRGB </td>
                        </tr>
                        <tr>
                            <td class="td_th">刷新率</td>
                            <td>144Hz </td>
                        </tr>
                        <tr>
                            <td class="td_th">屏幕亮度</td>
                            <td>250nits </td>
                        </tr>
                        <tr>
                            <td class="td_th">屏幕分辨率</td>
                            <td>FHD (1920 x 1080) 16:9 </td>
                        </tr>
                        <tr>
                            <th colspan="2">网络/蓝牙</th>
                        </tr>
                        <tr>
                            <td class="td_th">局域网</td>
                            <td>内建10/100/1000Mbps以太网络模块 </td>
                        </tr>
                        <tr>
                            <td class="td_th">无线网络</td>
                            <td>Wi-Fi 6(802.11ax) </td>
                        </tr>
                        <tr>
                            <td class="td_th">蓝牙类型</td>
                            <td>蓝牙v5.2 </td>
                        </tr>
                        <tr>
                            <th colspan="2">机器信息</th>
                        </tr>
                        <tr>
                            <td class="td_th">机身尺寸</td>
                            <td> 约354.9 x 251.9 x 22.45~24.95 mm </td>
                        </tr>
                        <tr>
                            <td class="td_th">机身重量</td>
                            <td>约2.1Kg </td>
                        </tr>
                        <tr>
                            <td class="td_th">电池容量</td>
                            <td>90WHrs,4S1P, 4-cell Li-ion </td>
                        </tr>
                        <tr>
                            <td class="td_th">电源输出</td>
                            <td>20V DC, 12A, 240W </td>
                        </tr>
                        <tr>
                            <td class="td_th">扬声器</td>
                            <td>内建Azalia compliant 声卡芯片 支持Dolby ATMOS 2个高品质扬声器 </td>
                        </tr>
                        <tr>
                            <td class="td_th">摄像头</td>
                            <td> HD camera </td>
                        </tr>
                        <tr>
                            <td class="td_th">散热规格</td>
                            <td>双风扇五散热导管 </td>
                        </tr>
                        <tr>
                            <td class="td_th">外部材质</td>
                            <td>金属材质；高强度复合材质 </td>
                        </tr>
                        <tr>
                            <td class="td_th">随机附件</td>
                            <td>电源适配器、保卡、用户手册 </td>
                        </tr>
                        <tr>
                            <td class="td_th">保修信息</td>
                            <td>1年整机国际联保，2年主要部件当地保修 </td>
                        </tr>
                        <tr>
                            <td class="td_th">商品型号</td>
                            <td>FA507RM6800-0DAFXHB6X11 </td>
                        </tr>
                        <tr>
                            <td class="td_th">接口-左侧</td>
                            <td>1x HDMI 2.0b 1x RJ45 LAN 1x USB 3.2 Gen1 Type-A 1x USB 3.2 Gen1 Type-C 1x USB 3.2
                                Gen1Type-C，支持DP1.2 1x 耳机麦克风二合一接口 1x电源接口 </td>
                        </tr>
                        <tr>
                            <td class="td_th">接口-右侧</td>
                            <td>1x USB 3.2 Gen1 Type-A </td>
                        </tr>
                        <tr>
                            <td class="td_th">接口-前侧</td>
                            <td>无 </td>
                        </tr>
                        <tr>
                            <td class="td_th">接口-后侧</td>
                            <td>无 </td>
                        </tr>
                        <tr>
                            <td class="td_th">操作系统</td>
                            <td>Windows 11 Home </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab3" v-show="tab_index==2">
                <div class="title">商品评价</div>
                <div class="module">
                    <div class="tab">
                        <div>好评率</div>
                        <div class="tab_rate">92.9%</div>
                    </div>
                </div>
                <div class="pjTag">
                    <ul @click="pjTag($event)">
                        <li class="active">全部评价(2)</li>
                        <li>晒图(0)</li>
                        <li>视频晒图(0)</li>
                        <li>追评(0)</li>
                        <li>好评(2)</li>
                        <li>中评(0)</li>
                    </ul>
                </div>
                <div class="pj_content">
                    <div class="item">
                        <div class="l">
                            <img src="https://bpic.51yuansu.com/pic3/cover/01/69/80/595f67bf2026f_610.jpg" alt="">
                            <div class="name">还在敲</div>
                        </div>
                        <div class="r">
                            <div class="xing">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <div>2023-01-26</div>
                            </div>
                            <div class="com">初五了那个傻逼还在敲代码</div>
                            <div class="like"><span>点赞&nbsp;(0)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>留言&nbsp;(0)</span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">
                            <img src="https://bpic.51yuansu.com/pic3/cover/01/69/80/595f67bf2026f_610.jpg" alt="">
                            <div class="name">傻逼</div>
                        </div>
                        <div class="r">
                            <div class="xing">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <img src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                                    alt="">
                                <div>2023-01-26</div>
                            </div>
                            <div class="com">妈的,臭傻逼原来是我</div>
                            <div class="like"><span>点赞&nbsp;(0)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>留言&nbsp;(0)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab4" v-show="tab_index==3">
                <img src=".\img\infos\server.png" alt="">
            </div>
        </div>

        <!-- 底部 -->
        <div class="footer">
            <img src="./img/goods/footer.png" alt="">
        </div>
    </div>
</body>

</html>
<script src="./js/axios.js"></script>
<script src="./js/lodash.js"></script>
<script src="./js/layer/layer.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            cart_num: 0,
            search: '',
            wares: {},
            recom: [],
            user: null,
            imgMid: '',
            counter: 1,
            tab_index: 0,
            move_index: 0,
            mini_indx: 0,
            login: false,
            imgList: [
                ,
                './img/goods/info/2.jpg',
                './img/goods/info/3.jpg',
                './img/goods/info/4.jpg',
                './img/goods/info/5.jpg',
                './img/goods/info/6.jpg',
                './img/goods/info/7.jpg',
                './img/goods/info/8.jpg',
                './img/goods/info/9.jpg',
                './img/goods/info/10.jpg',
            ],
            tu1: [
                './img/infos/gg5.jpg'
                , './img/infos/i1.jpg'
                , './img/infos/i2.jpg'
                , './img/infos/i3.jpg'
                , './img/infos/i4.jpg'
                , './img/infos/i5.jpg'
            ],

        },
        watch: {
            tab_index: function (val) {
                $($('#tab').children()[val]).addClass('cli').siblings().removeClass('cli');
            }
        },
        filters: {
            tuStr(index) {
                return `./img/infos/x${index}.jpg`
            }
        },
        methods: {
            toGo(y) {
                $('body,html').animate({ scrollTop: y }, 500);
            },
            autoScroll() {
                $(window).on('scroll', _.throttle(function () {
                    if (document.documentElement.scrollTop < 200) {
                        $('#gg .rightBox').hide();
                    } else {
                        $('#gg .rightBox').show();
                    }
                }, 200))
            },
            cout_jia() {
                this.counter++;
            },
            cout_jian() {
                if (this.counter - 1 != 0) {
                    this.counter--;
                }
            },
            pjTag(e) {
                if (e.target.nodeName == 'LI') {
                    $(e.target).addClass('active').siblings().removeClass('active');
                }
            },
            left_move() {
                if (this.move_index - 1 >= 0)
                    $('#recom .swiperlist ul').stop().animate({ 'left': -(--this.move_index * 236) }, 200)
                console.log(this.move_index);
            },
            right_move() {
                if (this.move_index + 1 <= this.recom.length - 5)
                    $('#recom .swiperlist ul').stop().animate({ left: -(++this.move_index * 236) }, 200)
                console.log(this.move_index);
            },
            glass() {
                $('#glass .mid_box').mouseenter(function (e) {
                    let w = $('#glass .kuai').width();
                    let h = $('#glass .kuai').height();
                    if (e.offsetX < w / 2) { $('#glass .kuai').css({ left: 0 }); }
                    if (e.offsetX > 315) { $('#glass .kuai').css({ left: 180 }); }
                    if (e.offsetY < h / 2) { $('#glass .kuai').css({ top: 0 }); }
                    if (e.offsetY > 315) { $('#glass .kuai').css({ top: 180 }); }
                    $('#glass .kuai').show();
                    $('#glass .big_box').show();
                    $('#glass .mid_box').on('mousemove', function (e) {
                        let x = e.pageX - $('#glass .mid_box').offset().left - w / 2;
                        let y = e.pageY - $('#glass .mid_box').offset().top - h / 2;
                        if (x >= 0 && x <= 180) {
                            $('#glass .kuai').css({ left: x });
                            $('#glass .big_tu').css({ left: Math.ceil(-x / 450 * 1000) });
                        }
                        if (y >= 0 && y <= 180) {
                            $('#glass .kuai').css({ top: y })
                            $('#glass .big_tu').css({ top: Math.ceil(-y / 450 * 1000) });
                        }
                    })
                })
                $('#glass .mid_box').mouseleave(function () {
                    $('#glass .kuai').hide();
                    $('#glass .big_box').hide();
                })
            },
            mini_btn_prev() {
                if (this.mini_indx - 1 >= 0) {
                    $('#glass .mini_box').stop().animate({ left: --this.mini_indx * -75 })
                }
            },
            mini_btn_next() {
                if (this.mini_indx + 1 <= this.imgList.length - 5) {
                    $('#glass .mini_box').stop().animate({ left: ++this.mini_indx * -75 })
                }
            },
            isLogin() {
                let token = localStorage.getItem('token');
                if (token != null) {
                    axios({
                        url: '/users/is',
                        method: 'get',
                        headers: {
                            token: token
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.login = true;
                            this.user = res.data.user;
                            this.cart_num = res.data.num;
                        } else {
                            console.log("token 已经过期");
                        }
                    })
                } else {
                    console.log('没有token');
                }
            },
            joinCart(gid, uid) {
                if (this.login) {
                    axios({
                        url: './cart/add',
                        method: 'post',
                        data: {
                            ...this.wares,
                            uid: this.user.id,
                            number: this.counter,
                        },
                        headers: {
                            token: localStorage.getItem('token'),
                        }
                    }).then(res => {
                        this.counter = 1;
                        layer.msg(res.data.msg);
                    })
                } else {
                    layer.alert('你还没登录,请先登录')
                }

            },
            exit() {
                localStorage.removeItem('token');
                location.reload();
            }
        },
        created() {
            this.autoScroll();
            this.isLogin();
            axios({
                url: '/wares/query',
                method: 'get',
                params: { gid: getId() },
            }).then(res => {
                if (res.data.code == 200) {
                    this.wares = res.data.data;
                    this.recom = res.data.recom;
                    this.imgList[0] = this.imgMid = this.wares.gurl;
                    this.wares.att.tag1 = '品牌：' + this.wares.att.tag1;
                    this.wares.att.tag2 = '所属分类：' + this.wares.att.tag2;
                    this.wares.att.tag3 = 'CPU型号：' + this.wares.att.tag3
                } else {
                    location = './err'
                }
            })
        },
        mounted() {
            this.glass();
        },
    })

    function getId() {
        let str = window.location.search;
        return str.split('=')[1]
    }


</script>